/* ***** BEGIN LICENSE BLOCK ***** * Version: MPL 1.1/GPL 2.0/LGPL 2.1 * * The contents of this file are subject to the Mozilla Public License Version * 1.1 (the "License"); you may not use this file except in compliance with * the License. You may obtain a copy of the License at * http://www.mozilla.org/MPL/ * * Software distributed under the License is distributed on an "AS IS" basis, * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License * for the specific language governing rights and limitations under the * License. * * The Original Code is mozilla.org code. * * The Initial Developer of the Original Code is * Netscape Communications Corporation. * Portions created by the Initial Developer are Copyright (C) 1998 * the Initial Developer. All Rights Reserved. * * Contributor(s): * * Alternatively, the contents of this file may be used under the terms of * either of the GNU General Public License Version 2 or later (the "GPL"), * or the GNU Lesser General Public License Version 2.1 or later (the "LGPL"), * in which case the provisions of the GPL or the LGPL are applicable instead * of those above. If you wish to allow use of your version of this file only * under the terms of either the GPL or the LGPL, and not to allow others to * use your version of this file under the terms of the MPL, indicate your * decision by deleting the provisions above and replace them with the notice * and other provisions required by the GPL or the LGPL. If you do not delete * the provisions above, a recipient may use your version of this file under * the terms of any one of the MPL, the GPL or the LGPL. * * ***** END LICENSE BLOCK ***** */ /** Styles for old GFX form widgets **/ @namespace url(http://www.w3.org/1999/xhtml); /* set default namespace to HTML */ @namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); *|*::-moz-fieldset-content { display: block; height: 100%; /* Need this so percentage heights of kids work right */ } /* miscellaneous form elements */ legend { padding-left: 2px; padding-right: 2px; border: none; position: static ! important; float: none ! important; } fieldset { display: block; margin-left: 2px; margin-right: 2px; padding: 0.35em 0.625em 0.75em; border: 2px groove ThreeDFace; } label { cursor: default; } /* default inputs, text inputs, and selects */ /* Note: Values in nsNativeTheme IsWidgetStyled function need to match textfield background/border values here */ input { -moz-appearance: textfield; /* The sum of border-top, border-bottom, padding-top, padding-bottom must be the same here, for buttons, and for <select> (including its internal padding magic) */ padding: 1px 0 1px 0; border: 2px inset ThreeDFace; background-color: -moz-Field; color: -moz-FieldText; font: -moz-field; line-height: normal !important; text-align: start; text-transform: none; word-spacing: normal; letter-spacing: normal; cursor: text; -moz-binding: url("chrome://global/content/platformHTMLBindings.xml#inputFields"); text-indent: 0; -moz-user-select: text; } input > .anonymous-div { white-space : nowrap; } textarea { margin: 1px 0 1px 0; border: 2px inset ThreeDFace; background-color: -moz-Field; color: -moz-FieldText; font: medium -moz-fixed; text-align: start; text-transform: none; word-spacing: normal; letter-spacing: normal; vertical-align: text-bottom; cursor: text; -moz-binding: url("chrome://global/content/platformHTMLBindings.xml#textAreas"); -moz-appearance: textfield; text-indent: 0; -moz-user-select: text; } textarea > scrollbar { cursor: default; } textarea > .anonymous-div, input > .anonymous-div { overflow: auto; border: 0px !important; padding: 0px; margin: 0px; /* XXXldb I'm not sure if we really want the 'text-decoration: inherit', but it's needed to make 'text-decoration' "work" on text inputs. */ text-decoration: inherit; } select { margin: 0; border-color: ThreeDFace; background-color: -moz-Field; color: -moz-FieldText; font: -moz-list; line-height: normal !important; white-space: nowrap !important; text-align: start; cursor: default; -moz-box-sizing: border-box; -moz-user-select: none; -moz-appearance: menulist; border-width: 2px; border-style: inset; text-indent: 0; } /* Need the "select[size][multiple]" selector to override the settings on 'select[size="1"]', eg if one has <select size="1" multiple> */ select[size], select[multiple], select[size][multiple] { /* Different alignment and padding for listbox vs combobox */ vertical-align: text-bottom; padding: 1px 0 1px 0; -moz-appearance: listbox; } select[size="0"], select[size="1"] { /* Except this is not a listbox */ vertical-align: baseline; padding: 0; -moz-appearance: menulist; } select > input[type="button"] { width: 12px; height: 12px; white-space: nowrap; position: static !important; background-image: url("arrow.gif") !important; background-repeat: no-repeat !important; background-position: center !important; -moz-appearance: menulist-button; } select > input[type="button"]:active { background-image: url("arrowd.gif") !important; } select::-moz-dummy-option { visibility: hidden; content: "XX"; /* demo 8, edge case test 1 */ } *|*::-moz-display-comboboxcontrol-frame { overflow: -moz-hidden-unscrollable; /* This top/bottom padding plus the combobox top/bottom border need to add up to the top/bottom borderpadding of text inputs and buttons */ padding-top: 1px; padding-bottom: 1px; -moz-padding-start: 4px; -moz-padding-end: 0; background-color: inherit; color: inherit; white-space: nowrap; text-align: inherit; -moz-user-select: none; } option { display: block; min-height: 1em; line-height: normal !important; -moz-user-select: none; text-indent: 0; } select > option { padding-top : 0; padding-bottom: 0; -moz-padding-start: 3px; -moz-padding-end: 5px; } option:checked { background-color: Highlight ! important; color: HighlightText ! important; } optgroup { display: block; font: -moz-list; line-height: normal !important; font-style: italic; font-weight: bold; font-size: inherit; -moz-user-select: none; text-indent: 0; } optgroup > option { padding-left: 20px; font-style: normal; font-weight: normal; } optgroup:before { display: block; content: attr(label); } *|*::-moz-dropdown-list { z-index: 2147483647; background-color: inherit; -moz-user-select: none; position: static !important; float: none !important; border: 1px outset black !important; } input[disabled], textarea[disabled], option[disabled], optgroup[disabled], select[disabled] { -moz-user-input: disabled; -moz-user-focus: ignore; color: GrayText; background-color: ThreeDFace; cursor: inherit; } option[disabled], optgroup[disabled] { background-color: transparent; } /* hidden inputs */ input[type="hidden"] { -moz-appearance: none; display: none; padding: 0; border: 0; cursor: auto; -moz-user-focus: ignore; -moz-binding: none; } /* image buttons */ input[type="image"] { -moz-appearance: none; padding: 0; border: none; background-color: transparent; font-family: sans-serif; font-size: small; cursor: pointer; -moz-binding: none; -moz-appearance: none; } input[type="image"][disabled] { cursor: inherit; } input[type="image"]:focus { outline: 1px dotted invert; } /* file selector */ input[type="file"] { -moz-appearance: none; white-space: nowrap; cursor: default; -moz-binding: none; padding: 0 !important; border-style: none !important; } input[type="file"] > input[type="text"] { border-color: inherit; background-color: inherit; color: inherit; font-size: inherit; height: inherit; letter-spacing: inherit; } /* button part of file selector */ input[type="file"] > input[type="button"] { height: inherit; font-size: inherit; letter-spacing: inherit; } /* radio buttons */ input[type="radio"] { -moz-appearance: radio; width: 13px; height: 13px; margin: 3px 3px 0px 5px; padding: 0 !important; cursor: default; -moz-binding: none; -moz-border-radius: 100% !important; } /* check boxes */ input[type="checkbox"] { -moz-appearance: checkbox; width: 13px; height: 13px; margin: 3px 3px 3px 4px; padding: 0 !important; vertical-align: text-bottom; cursor: default; -moz-binding: none; -moz-border-radius: 0 !important; } /* common features of radio buttons and check boxes */ input[type="radio"], input[type="checkbox"] { /* same colors as |input| rule, but |!important| this time. */ -moz-box-sizing: border-box; background-color: -moz-Field ! important; color: -moz-FieldText ! important; border: 2px inset ThreeDFace ! important; } input[type="radio"][disabled], input[type="radio"][disabled]:active, input[type="radio"][disabled]:hover, input[type="radio"][disabled]:hover:active, input[type="checkbox"][disabled], input[type="checkbox"][disabled]:active, input[type="checkbox"][disabled]:hover, input[type="checkbox"][disabled]:hover:active { padding: 1px; border: 1px inset ThreeDShadow ! important; /* same as above, but !important */ color: GrayText ! important; background-color: ThreeDFace ! important; cursor: inherit; } input[type="checkbox"]:focus, input[type="radio"]:focus { border-style: groove !important; } input[type="checkbox"]:hover:active, input[type="radio"]:hover:active { background-color: ThreeDFace ! important; border-style: inset !important; } *|*::-moz-radio { width: 4px; height: 4px; background-color: -moz-FieldText ! important; -moz-border-radius: 3px; } /* buttons */ /* Note: Values in nsNativeTheme IsWidgetStyled function need to match button background/border values here */ button, input[type="reset"], input[type="button"], input[type="submit"] { -moz-appearance: button; /* The sum of border-top, border-bottom, padding-top, padding-bottom must be the same here, for text inputs, and for <select>. For buttons, make sure to include the -moz-focus-inner border/padding. */ padding: 0px 6px 0px 6px; border: 2px outset ButtonFace; background-color: ButtonFace; color: ButtonText; font: -moz-button; line-height: normal !important; white-space: pre; cursor: default; -moz-box-sizing: border-box; -moz-user-select: none; -moz-binding: none; text-align: center; } button { /* Buttons should lay out like "normal" html, mostly */ white-space: normal; text-indent: 0; } *|*::-moz-button-content { display: block; } button:active:hover, input[type="reset"]:active:hover, input[type="button"]:active:hover, input[type="submit"]:active:hover { padding: 0px 5px 0px 7px; border-style: inset; } button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner { padding: 0px 2px 0px 2px; border: 1px dotted transparent; } button:focus::-moz-focus-inner, input[type="reset"]:focus::-moz-focus-inner, input[type="button"]:focus::-moz-focus-inner, input[type="submit"]:focus::-moz-focus-inner, input[type="file"] > input[type="button"]:focus::-moz-focus-inner { border-color: ButtonText; } button[disabled]:active, button[disabled], input[type="reset"][disabled]:active, input[type="reset"][disabled], input[type="button"][disabled]:active, input[type="button"][disabled], select[disabled] > input[type="button"], select[disabled] > input[type="button"]:active, input[type="submit"][disabled]:active, input[type="submit"][disabled] { /* The sum of border-top, border-bottom, padding-top, padding-bottom must be the same here and for text inputs */ padding: 1px 7px 1px 7px; border: 1px outset ButtonShadow; color: GrayText; cursor: inherit; } /* * Make form controls inherit 'unicode-bidi' transparently as required by * their various anonymous descendants and pseudo-elements: * * <textarea> and <input type="text">: * inherit into the XULScroll frame with class 'anonymous-div' which is a * child of the text control. * * Buttons (either <button>, <input type="submit">, <input type="button"> * or <input type="reset">) * inherit into the ':-moz-button-content' pseudo-element. * * <select>: * inherit into the ':-moz-display-comboboxcontrol-frame' pseudo-element and * the <optgroup>'s ':before' pseudo-element, which is where the label of * the <optgroup> gets displayed. The <option>s don't use anonymous boxes, * so they need no special rules. */ textarea > .anonymous-div, input > .anonymous-div, *|*::-moz-button-content, *|*::-moz-display-comboboxcontrol-frame, optgroup:before { unicode-bidi: inherit; } /* * Force the text control child of file input controls to have left-to-right * directionality. Otherwise filenames containing right-to-left characters * will be reordered with chaotic results. */ input[type="file"] > input[type="text"] { direction: ltr !important; text-align: inherit; } @media print { input, textarea, select, button { -moz-user-input: none !important; } input[type="file"] { height: 2em; } }